<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>劳动合同模版</title>
    <link href="../css/all.min.css" rel="stylesheet">
    <script src="../js/signature_pad.umd.min.js"></script>
    <style>
        body {
            background-color: #f4f4f5;
            font-family: "SimSun", sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

       .a4-container {
            width: 210mm;
            min-height: 297mm;
            padding: 32px;
            background-color: #fff;
            box-shadow: 0 4px 6 -1px rgba(0, 0, 0, 0.1), 0 2px 4 -1px rgba(0, 0, 0, 0.06);
            border-radius: 8px;
            position: relative;
            box-sizing: border-box;
        }

       .title {
            font-size: 22px;
            font-weight: bold;
            text-align: center;
            color: #000;
            margin-bottom: 24px;
        }

       .content-text {
            color: #000;
            line-height: 1.75;
            margin-bottom: 16px;
            text-indent: 2em;
        }

       .rule-list {
            list-style-type: decimal;
            padding-left: 24px;
            color: #000;
            line-height: 1.75;
            margin-bottom: 32px;
        }

       .underline-text {
            border-bottom: 1px solid #9ca3af;
            padding: 0 8px;
            cursor: pointer;
        }

       .print-button {
            position: fixed;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            padding: 10px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

       .print-button:hover {
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }

       .signature-section {
            text-align: right;
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

       .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            justify-content: center;
            align-items: center;
        }

       .modal-content {
            background: linear-gradient(135deg, #f9f9f9, #e6e6e6);
            padding: 30px;
            border: 1px solid #888;
            width: 400px;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            animation: fadeIn 0.3s ease-out;
        }

       .close {
            color: #aaa;
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 28px;
            font-weight: bold;
        }

       .close:hover,
       .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

       .signature-pad {
            border: 1px solid #ccc;
            margin: 20px auto;
            border-radius: 5px;
            display: block;
        }

       .modal-button {
            padding: 12px 25px;
            margin: 0 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 16px;
        }

       .modal-button.save {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

       .modal-button.save:hover {
             background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }

       .modal-button.clear {
            background: linear-gradient(135deg, #9ca3af 0%, #6f6c6c 100%);
            color: white;
        }

       .modal-button.clear:hover {
            background: linear-gradient(135deg, #6f6c6c 0%, #9ca3af 100%);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media print {
            body {
                background-color: transparent;
            }

           .a4-container {
                box-shadow: none;
                border-radius: 0;
                width: 210mm;
                min-height: 297mm;
                margin: 0;
                padding: 32px;
                page-break-after: avoid;
            }

           .print-button {
                display: none;
            }

           .modal {
                display: none !important;
            }
        }

       .editable {
            border-bottom: 1px solid #000;
            outline: none;
            display: inline-block;
            text-indent: 0px;
            caret-color: #000;
        }

       .seal-preview {
            margin: 20px auto;
            max-width: 100%;
            max-height: 200px;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            color: #999;
            font-size: 14px;
            min-height: 150px;
            cursor: pointer;
        }

       .seal-preview:empty::before {
            content: '暂无预览';
        }

        /* 隐藏选择文件按钮 */
        #seal-file {
            display: none;
        }
    </style>
</head>

<body>
    <div class="a4-container">
        <h1 class="title">劳动合同</h1>
        <p class="content-text">甲方（用人单位）：<span id="employer-name" class="editable" contenteditable="true" data-default="单位全称">单位全称</span>，法定代表人（主要负责人）：<span class="editable" contenteditable="true" data-default="姓名">姓名</span>，住所：<span class="editable" contenteditable="true" data-default="详细地址">详细地址</span>，联系电话：<span class="editable" contenteditable="true" data-default="电话号码">电话号码</span>。</p>
        <p class="content-text">乙方（劳动者）：<span class="editable" contenteditable="true" data-default="姓名">姓名</span>，性别：<span class="editable" contenteditable="true" data-default="男/女">男/女</span>，身份证号码：<span class="editable" contenteditable="true" data-default="18位号码">18位号码</span>，住址：<span class="editable" contenteditable="true" data-default="详细地址">详细地址</span>，联系电话：<span class="editable" contenteditable="true" data-default="电话号码">电话号码</span>。</p>
        <p class="content-text">根据《中华人民共和国劳动法》《中华人民共和国劳动合同法》和国家及省的有关规定，甲乙双方按照合法、公平、平等自愿、协商一致、诚实信用的原则订立本合同。</p>
        <ol class="rule-list">
            <li><strong>合同期限</strong>
                <ol type="a">
                    <li>本合同为固定期限/无固定期限/以完成一定工作任务为期限的劳动合同，合同期限自 <span class="editable" contenteditable="true" data-default="起始日期">起始日期</span> 至 <span class="editable" contenteditable="true" data-default="结束日期">结束日期</span>。其中试用期自 <span class="editable" contenteditable="true" data-default="试用起始日期">试用起始日期</span> 至 <span class="editable" contenteditable="true" data-default="试用结束日期">试用结束日期</span>。</li>
                </ol>
            </li>
            <li><strong>工作内容和工作地点</strong>
                <ol type="a">
                    <li>乙方同意根据甲方工作需要，担任 <span class="editable" contenteditable="true" data-default="岗位名称">岗位名称</span> 工作。</li>
                    <li>工作地点为 <span class="editable" contenteditable="true" data-default="工作地点">工作地点</span>。甲方因生产经营需要调整乙方工作地点的，应协商一致并办理工作地点变更手续。</li>
                </ol>
            </li>
            <li><strong>工作时间和休息休假</strong>
                <ol type="a">
                    <li>甲方实行<span class="editable" contenteditable="true" data-default="工作制">工作制</span>工时工作制。</li>
                    <li>甲方依法保证乙方的休息权利。乙方依法享受法定节假日、年休假、婚丧假、探亲假、产假等假期。</li>
                </ol>
            </li>
            <li><strong>劳动报酬</strong>
                <ol type="a">
                    <li>甲方每月 <span class="editable" contenteditable="true" data-default="发薪日">发薪日</span> 以货币形式支付乙方工资，工资为 <span class="editable" contenteditable="true" data-default="工资数额">工资数额</span> 元/月。试用期工资为 <span class="editable" contenteditable="true" data-default="试用期工资数额">试用期工资数额</span> 元/月。</li>
                    <li>甲方支付乙方的工资不得低于当地最低工资标准。</li>
                </ol>
            </li>
            <li><strong>社会保险和福利待遇</strong>
                <ol type="a">
                    <li>甲乙双方应按国家和地方有关规定参加社会保险，甲方应为乙方办理有关社会保险手续，并承担相应社会保险义务。</li>
                    <li>乙方患病或非因工负伤的医疗待遇按照国家和地方有关政策规定执行。</li>
                    <li>乙方患职业病或因工负伤的待遇按国家和地方有关工伤保险政策规定执行。</li>
                    <li>甲方为乙方提供以下福利待遇：<span class="editable" contenteditable="true" data-default="福利待遇内容">福利待遇内容</span>。</li>
                </ol>
            </li>
            <li><strong>劳动保护、劳动条件和职业危害防护</strong>
                <ol type="a">
                    <li>甲方按照国家和地方有关规定，为乙方提供必要的劳动保护和劳动条件，建立健全生产工艺流程，制定操作规程、工作规范和劳动安全卫生制度及其标准。</li>
                    <li>甲方对可能产生职业病危害的岗位，应向乙方履行如实告知义务，并按国家和地方有关规定做好防护措施。</li>
                    <li>乙方有权拒绝甲方的违章指挥、强令冒险作业，对甲方及其管理人员漠视乙方生命安全和身体健康的行为，有权提出批评并向有关部门检举控告。</li>
                </ol>
            </li>
            <li><strong>合同的解除和终止</strong>
                <ol type="a">
                    <li>经甲乙双方协商一致，可以解除本合同。</li>
                    <li>乙方有下列情形之一的，甲方可以解除本合同：
                        <ul>
                            <li>在试用期间被证明不符合录用条件的；</li>
                            <li>严重违反甲方规章制度的；</li>
                            <li>严重失职、营私舞弊，给甲方造成重大损害的；</li>
                            <li>同时与其他用人单位建立劳动关系，对完成甲方工作任务造成严重影响，或者经甲方提出，拒不改正的；</li>
                            <li>以欺诈、胁迫的手段或者乘人之危，使甲方在违背真实意思的情况下订立或者变更本合同致使本合同无效的；</li>
                            <li>被依法追究刑事责任的。</li>
                        </ul>
                    </li>
                    <li>有下列情形之一的，本合同终止：
                        <ul>
                            <li>本合同期满的；</li>
                            <li>乙方开始依法享受基本养老保险待遇的；</li>
                            <li>乙方死亡，或者被人民法院宣告死亡或者宣告失踪的；</li>
                            <li>甲方被依法宣告破产的；</li>
                            <li>甲方被吊销营业执照、责令关闭、撤销或者甲方决定提前解散的；</li>
                            <li>法律、行政法规规定的其他情形。</li>
                        </ul>
                    </li>
                </ol>
            </li>
            <li><strong>保密和竞业限制</strong>
                <ol type="a">
                    <li>乙方对在工作过程中知悉的甲方的商业秘密、技术秘密等负有保密义务。</li>
                    <li>未经甲方书面同意，乙方在离职后 <span class="editable" contenteditable="true" data-default="竞业限制期限">竞业限制期限</span> 年内，不得在与甲方有竞争关系的单位工作或从事与甲方有竞争关系的业务。甲方应按照约定向乙方支付竞业限制经济补偿。</li>
                </ol>
            </li>
            <li><strong>违约责任</strong>
                <ol type="a">
                    <li>若乙方违反本合同约定，应承担相应的违约责任，包括但不限于赔偿甲方因此遭受的全部损失。</li>
                    <li>若甲方违反本合同约定，应承担相应的法律责任，按照相关法律法规的规定向乙方支付赔偿金或补偿金。</li>
                </ol>
            </li>
            <li><strong>争议解决</strong>
                <ol type="a">
                    <li>如双方在本合同履行过程中发生争议，应首先通过友好协商解决；协商不成的，任何一方均有权向有管辖权的劳动争议仲裁委员会申请仲裁；对仲裁裁决不服的，可以向人民法院提起诉讼。</li>
                    <li>在争议解决期间，除争议事项外，双方应继续履行本合同的其他条款。</li>
                </ol>
            </li>
        </ol>
        <p class="content-text">本合同一式两份，甲乙双方各执一份，具有同等法律效力。</p>
        <div class="signature-section">
            <p class="content-text">甲方（盖章）：<span id="seal-line" class="underline-text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
            <p class="content-text"> 法定代表人（签字）：<span id="legal-signature-line" class="underline-text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
            <p class="content-text">乙方（签字）：<span id="signature-line" class="underline-text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
            <p class="content-text">签订日期：<span id="current-date" class="editable" contenteditable="true" data-default="签订日期" style='padding-left:20px;padding-right:20px;'>签订日期</span></p>
        </div>
    </div>
    <button class="print-button" onclick="window.print()">打印</button>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>签字确认</h2>
            <canvas id="signature-pad" class="signature-pad" width="350" height="150"></canvas>
            <button class="modal-button save" onclick="saveSignature()">保存签名</button>
            <button class="modal-button clear" onclick="clearSignature()">清除签名</button>
        </div>
    </div>

    <div id="legalModal" class="modal">
        <div class="modal-content">
            <span class="close" id="legal-close">&times;</span>
            <h2>法定代表人签字确认</h2>
            <canvas id="legal-signature-pad" class="signature-pad" width="350" height="150"></canvas>
            <button class="modal-button save" onclick="saveLegalSignature()">保存签名</button>
            <button class="modal-button clear" onclick="clearLegalSignature()">清除签名</button>
        </div>
    </div>

    <div id="sealModal" class="modal">
        <div class="modal-content">
            <span class="close" id="seal-close">&times;</span>
            <h2>选择电子签章</h2>
            <input type="file" id="seal-file" accept="image/*" onchange="previewSeal()">
            <div id="seal-preview" class="seal-preview" onclick="document.getElementById('seal-file').click()"></div>
            <button class="modal-button save" onclick="saveSeal()">保存签章</button>
        </div>
    </div>

    <script>
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = String(currentDate.getMonth() + 1).padStart(2, '0');
        const day = String(currentDate.getDate()).padStart(2, '0');
        document.getElementById('current-date').textContent = `${year}年${month}月${day}日`;

        const signatureLine = document.getElementById('signature-line');
        const modal = document.getElementById('myModal');
        const closeBtn = document.querySelector('.close');
        const canvas = document.getElementById('signature-pad');
        const signaturePad = new SignaturePad(canvas);

        const legalSignatureLine = document.getElementById('legal-signature-line');
        const legalModal = document.getElementById('legalModal');
        const legalCloseBtn = document.getElementById('legal-close');
        const legalCanvas = document.getElementById('legal-signature-pad');
        const legalSignaturePad = new SignaturePad(legalCanvas);

        const employerName = document.getElementById('employer-name');
        const sealLine = document.getElementById('seal-line');
        const sealModal = document.getElementById('sealModal');
        const sealCloseBtn = document.getElementById('seal-close');
        const sealFile = document.getElementById('seal-file');
        const sealPreview = document.getElementById('seal-preview');

        employerName.addEventListener('input', function () {
            if (this.textContent === this.dataset.default) {
                sealLine.textContent = '';
            } else {
                sealLine.textContent = this.textContent;
            }
        });

        signatureLine.addEventListener('click', function () {
            modal.style.display = 'flex';
        });

        legalSignatureLine.addEventListener('click', function () {
            legalModal.style.display = 'flex';
        });

        sealLine.addEventListener('click', function () {
            sealModal.style.display = 'flex';
        });

        closeBtn.addEventListener('click', function () {
            modal.style.display = 'none';
        });

        legalCloseBtn.addEventListener('click', function () {
            legalModal.style.display = 'none';
        });

        sealCloseBtn.addEventListener('click', function () {
            sealModal.style.display = 'none';
        });

        window.addEventListener('click', function (event) {
            if (event.target === modal) {
                modal.style.display = 'none';
            }
            if (event.target === legalModal) {
                legalModal.style.display = 'none';
            }
            if (event.target === sealModal) {
                sealModal.style.display = 'none';
            }
        });

        function saveSignature() {
            const data = signaturePad.toDataURL();
            const img = new Image();
            img.src = data;
            img.style.width = '200px';
            img.style.verticalAlign = 'middle';
            signatureLine.innerHTML = '';
            signatureLine.appendChild(img);
            modal.style.display = 'none';
        }

        function saveLegalSignature() {
            const data = legalSignaturePad.toDataURL();
            const img = new Image();
            img.src = data;
            img.style.width = '200px';
            img.style.verticalAlign = 'middle';
            legalSignatureLine.innerHTML = '';
            legalSignatureLine.appendChild(img);
            legalModal.style.display = 'none';
        }

        function clearSignature() {
            signaturePad.clear();
        }

        function clearLegalSignature() {
            legalSignaturePad.clear();
        }

        function previewSeal() {
            const file = sealFile.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.style.maxWidth = '100%';
                    img.style.maxHeight = '200px';
                    sealPreview.innerHTML = '';
                    sealPreview.appendChild(img);
                };
                reader.readAsDataURL(file);
            } else {
                sealPreview.innerHTML = '';
            }
        }

        function saveSeal() {
            const file = sealFile.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const img = new Image();
                    img.src = e.target.result;
                    img.style.width = '200px';
                    img.style.margin = '-50px 10px -100px -80px';
                    img.style.verticalAlign = 'middle';
                    sealLine.innerHTML = '';
                    sealLine.appendChild(img);
                    sealModal.style.display = 'none';
                };
                reader.readAsDataURL(file);
            }
        }

        const editableElements = document.querySelectorAll('.editable');
        editableElements.forEach(element => {
            element.addEventListener('focus', function () {
                setTimeout(() => {
                    if (this.textContent === this.dataset.default) {
                        this.textContent = '';
                        this.style.color = '#000';
                    }
                }, 0);
            });
            element.addEventListener('blur', function () {
                if (this.textContent === '') {
                    this.textContent = this.dataset.default;
                    this.style.color = '#777';
                }
            });
        });
    </script>
</body>

</html>